<script setup lang="ts">
import { invoke } from '@tauri-apps/api/tauri';
import { appWindow,Window,getCurrent,WebviewWindow, getAll, LogicalSize, LogicalPosition } from '@tauri-apps/api/window';
import { reactive, ref, Ref } from 'vue';
import { exit } from '@tauri-apps/api/process'
import { listen } from '@tauri-apps/api/event';
import { onMounted } from 'vue';
const logo = ref('@/assets/image/logo.png')
const isActive: Ref<boolean> = ref<boolean>(false)
const showModal = () => {
    dialog.value = true
};
const dialog = ref<boolean>(false)
const handleOk = async (e: MouseEvent) => {
    if (appWindow.label.indexOf('main') > -1) {
        await exit();
    }
};
// 最小化
const handleWinMin = async () => {
    console.log('handleWinMin');
   //await appWindow.minimize()
    await getCurrent().minimize();
};
//后台运行
const handleCancel = async () => {
    isActive.value = false;
    await getCurrent().hide()
};

// 最大化/还原
const handleWinMax2Min = async () => {

    const resizable = await appWindow.isResizable()
    if (!resizable) return
    await appWindow.toggleMaximize()
    // const resizable = await appWindow.isResizable()
    // if (!resizable) {
    //     return
    // };
    // const unmaximize=await appWindow.unmaximize()
    // const isMaximized:boolean=await appWindow.isMaximized()
    // if(isMaximized){
    //     let l=new LogicalSize(200,300)
    //     await appWindow.setPosition(new LogicalPosition (600, 500));
    // }else{
    //     await appWindow.maximize();
    // }
}
const close_modal = async () => {
    dialog.value = false
}
//关于
const openAboutWin = () => {
    let all_Label = getAll();
    for (let i = 0; i < all_Label.length; i++) {
        let window_ = all_Label[i];
        if ("about-window" == window_.label) {
            //有窗口，重新创建,聚焦并显示在最顶层
            //WebviewWindow.getByLabel("about-window").setFocus()
            // loading embedded asset:
            const webview = new WebviewWindow('about-window');
            webview.setFocus()
            return;
        }
    }
    invoke('about').then((res) => {
        console.log(res)
    });

}

const drawer: Ref<boolean> = ref<boolean>(false)
const group = null;
class PersonStatic {
    // name在静态属性中是一个关键字，不允许使用
    //static names : string  // 此处不赋值就是一个 undefined
    static title: string = ''
    static value: string = ''
    static sayHi() { }  // 静态方法
}
const items: Array<PersonStatic> = [
    {
        title: 'Foo',
        value: 'foo',
    },
    {
        title: 'Bar',
        value: 'bar',
    },
    {
        title: 'Fizz',
        value: 'fizz',
    },
    {
        title: 'Buzz',
        value: 'buzz',
    },
];
</script>
<template>
    <v-app-bar :elevation="0" height="40" prominent>
        <v-app-bar-nav-icon rounded="1" elevation="0" style="margin-inline-start: 3px;" variant="text" :ripple="false"
            @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-toolbar-title>My Tools</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn rounded="1" elevation="0" variant="text" :ripple="false" icon="mdi-magnify"></v-btn>
        <v-btn rounded="1" elevation="0" variant="text" :ripple="false" :to="{ name: 'About', }" icon="mdi-filter"></v-btn>
        <v-btn rounded="1" elevation="0" variant="text" :ripple="false" icon="mdi-dots-vertical"></v-btn>
        <v-btn rounded="1" elevation="0" variant="text" :ripple="false" @click="handleWinMin" icon="mdi-minus-box"></v-btn>
        <v-btn rounded="1" elevation="0" variant="text" :ripple="false" @click="handleWinMax2Min"
            icon="mdi-checkbox-blank-outline"></v-btn>
        <v-btn rounded="1" elevation="0" variant="text" :ripple="false" style="margin-inline-end: 3px;" @click="showModal" icon="mdi-close"></v-btn>
        <v-dialog v-model="dialog" width="30%">
            <v-card>
                <v-toolbar>
                    <v-toolbar-title>退出应用</v-toolbar-title>
                    <v-btn rounded="1" elevation="0" icon>
                        <v-icon @click="dialog = false">mdi-close</v-icon>
                    </v-btn>
                </v-toolbar>
                <v-card-text>
                    <!-- <div class="text-h6 " style="display: flex;justify-content: center;"><v-icon icon="mdi-information" /></div> -->
                </v-card-text>
                <v-card-actions class="justify-end">
                    <v-btn rounded="1" elevation="0" variant="text" :ripple="false" @click="close_modal">退出</v-btn>
                    <v-btn rounded="1" elevation="0" variant="text" :ripple="false" @click="handleCancel">后台运行</v-btn>
                </v-card-actions>
            </v-card>

        </v-dialog>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" location="bottom" temporary>
        <v-list :items="items"></v-list>
    </v-navigation-drawer>
</template>

<style scoped>
.header {
    height: 30px;
    display: flex;
    /*align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
    align-items: center;
    /* 左右边距 */
    padding: 0 3px;
    line-height: normal;
    max-height: 30px;
    background-color: rgb(223, 223, 223);

    justify-content: space-between;
    -webkit-app-region: drag;
}

.right span {
    margin-left: 10px;
    margin-right: 5px;
    -webkit-app-region: no-drag;
}

.left span {
    margin-left: 3px;
    -webkit-app-region: no-drag;
}
</style>